<%--
  Created by IntelliJ IDEA.
  User: tianyu
  Date: 2023/7/10
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品购物系统</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link rel="stylesheet" href="./css/fileinput.min.css">

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <!-- jsp= html + servlet -->
    <script src="./js/fileinput.min.js"></script>

    <style>
        th,td{ text-align: center}
        /*.navbar {
            font-size: 25px;
            background-color: #2e317c;
        }*/
    </style>

</head>

<body>
<!-- 导航  开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">商品购物管理</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown">
                            <a href="home.jsp" class="dropdown-toggle" ><%--data-toggle="dropdown"--%>
                                首页
                              <%--  <b class="caret"></b>--%>
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="shopping.jsp" class="dropdown-toggle" >商品</a>
                        </li>
                        <li class="dropdown">
                            <a href="buyerregister.jsp" class="dropdown-toggle">注册</a>
                        </li>
                        <li class="dropdown">
                            <a href="buyerlogin.jsp" class="dropdown-toggle" >登录</a> <%--data-toggle="dropdown"--%>
                        </li>
                        <li class="dropdown">
                            <a href="login.html" class="dropdown-toggle" >后台管理</a> <%--data-toggle="dropdown"--%>
                        </li>
                    </ul>
                    <!--向右对齐 -->
                    <ul class="nav navbar-nav navbar-right">

                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="col-md-1"></div>
</div>
<!-- 导航  结束 -->
<br>
<%--搜索栏 开始--%>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon">商品：</span>
                    <input type="text" class="form-control" placeholder="请输入搜索商品名" id="searchname">
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-default" onclick="buyerList(1,3)">搜索</button>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
<br>
<%--搜索栏 结束--%>

<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10  center-block">
        <table class="table table-striped table-bordered table-hover">
            <!-- <caption>基本的表格布局</caption> -->
            <div class="row">
                <tbody id="tb">
                <%--<div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="./images/bg.jpeg"
                             alt="通用的占位符缩略图">
                        <div class="caption">
                            <h3>缩略图标签</h3>
                            <p>一些示例文本。一些示例文本。</p>
                            <p>
                                <a href="#" class="btn btn-primary" role="button">
                                    按钮
                                </a>
                                &lt;%&ndash;<a href="#" class="btn btn-default" role="button">
                                    按钮
                                </a>&ndash;%&gt;
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="./images/bg.jpeg"
                             alt="通用的占位符缩略图">
                        <div class="caption">
                            <h3>缩略图标签</h3>
                            <p>一些示例文本。一些示例文本。</p>
                            <p>
                                <a href="#" class="btn btn-primary" role="button">
                                    按钮
                                </a>
                               &lt;%&ndash; <a href="#" class="btn btn-default" role="button">
                                    按钮
                                </a>&ndash;%&gt;
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="./images/bg.jpeg"
                             alt="通用的占位符缩略图">
                        <div class="caption">
                            <h3>缩略图标签</h3>
                            <p>一些示例文本。一些示例文本。</p>
                            <p>
                                <a href="#" class="btn btn-primary" role="button">
                                    按钮
                                </a>
                               &lt;%&ndash; <a href="#" class="btn btn-default" role="button">
                                    按钮
                                </a>&ndash;%&gt;
                            </p>
                        </div>
                    </div>
                </div>--%>
                </tbody>
            </div>
        </table>
        <!-- 分页开始-->
        <ul class="pagination" style="margin-left: 35%" id="fy">
            <%--<li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>--%>
        </ul>
    </div>
    <!-- 分页结束-->
    <%--<div class="col-md-1"></div>--%>
</div>

</body>
<script src="./js/upload.js"></script>
<script>
    //列表渲染
    var pageIndex=1;//第几页
    var pageSize=3;//每页几条
    buyerList(pageIndex,pageSize);
    function  buyerList(pageIndex,pageSize)
    {

        //获取搜索框的内容
        var searchname=$("#searchname").val();

        var obj={}//定义一个对象
        //获取搜索的名称

        //组装数组
        obj.search=null;
        obj.pageIndex=pageIndex;
        obj.pageSize=pageSize;

        $.ajax
        (
            {
                url:"/Test/getGoodss",//请求路径
                //data:JSON.stringify(obj),//请求数据
                data:{
                    searchname:searchname,
                    pageIndex:pageIndex,
                    pageSize: pageSize
                },
                type:"GET",//请求方式
                success:function (data)
                {
                    console.log(data);
                    data=JSON.parse(data);
                    //渲染表格
                    var html="";
                    var count= data.count;//总条数
                    data=data.data;
                    data.forEach((e,i)=>{
                        html+='<div class="col-sm-6 col-md-4">'+
                            '<div class="thumbnail">'+
                            '<img src="'+e.avatar+' "  alt="通用的占位符缩略图">'+
                            ' <div class="caption">'+
                            '<h3>'+e.goodsname+'</h3>'+
                            '<p>'+e.goodsprice+'</p>'+
                            '<p>'+    //, '+e.avatar+'
                            '<a onclick="BuyerLogin()" class="btn btn-primary" role="button">添加到购物车</a>'+
                            '</p>'+'</div>'+'</div>'+'</div>'
                    })
                    $("#tb").html(html);

                    //渲染分页
                    var fyhtml='<li><a onclick="buyerList('+(pageIndex-1>0?pageIndex-1:1)+','+pageSize+')" href="#">&laquo;</a></li>';
                    //调用Math.ceil()向上取整  2.1=3  2.5=3
                    var page= Math.ceil(count/pageSize);
                    for(var i=1;i<=page;i++){
                        fyhtml +=' <li><a onclick="buyerList('+i+','+pageSize+')" href="#">'+i+'</a></li>';
                    }
                    fyhtml += ' <li><a onclick="buyerList('+(pageIndex+1>=page?page:(pageIndex+1))+','+pageSize+')" href="#">&raquo;</a></li>';
                    $("#fy").html(fyhtml);

                }
            }
        )
    }

    //添加商品
    function addOrders(goodsname ,goodsprice, goodsavatar) {
        // 获取输入框的值
        //var id = $("#id").val();
        var ordersname = goodsname;
        var ordersnum = "未支付";
        var ordersplace = '<%=session.getAttribute("buyerplace")%>'.toString();
        var ordersprice =goodsprice;
        var avatar = goodsavatar;
        /* var currentDate = new Date();
         /!*var createdate =new Date().toLocaleTimeString();*!/
         var createdate = currentDate.toLocaleTimeString();*/
        var currentDate = new Date();
        var year = currentDate.getFullYear();
        var month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
        var day = ('0' + currentDate.getDate()).slice(-2);
        var createdate = year + '-' + month + '-' + day;

        var oname=<%=session.getAttribute("buyername")%>;
        console.log(createdate);
        /* // 判断不能为空
         if (!id) {
             alert("ID不能为空！")
             return;
         }*/
        if (!ordersname) {
            alert("订单名不能为空！")
            return;
        }
        if (!ordersnum) {
            alert("商品数量不能为空！")
            return;
        }
        if (!ordersplace) {
            alert("订单地址不能为空！")
            return;
        }
        if (!ordersprice) {
            alert("订单价格不能为空！")
            return;
        }
        if (!avatar) {
            alert("图片不能为空！")
            return;
        }
        if (!createdate) {
            alert("更新时间不能为空！")
            return;
        }
        if (!oname) {
            alert("用户名不能为空！")
            return;
        }

        //表单的形式进行数据发送
        $.ajax
        (
            {
                url: "/Test/orders?method=addOrders",//请求路径
                data: {ordersname:ordersname, ordersnum: ordersnum , ordersplace: ordersplace , ordersprice: ordersprice ,
                    avatar:avatar, createdate:createdate, oname:oname},//请求数据
                type: "POST",//请求方式
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {
                        alert("添加成功！");
                        /* OrdersList(1, 5);//刷新列表
                         $("#myModal").modal("hide");//模态框隐藏*/
                    } else {
                        alert("添加失败！");
                    }
                }
            }
        )
    }

    function BuyerLogin() {
        alert("请先登录账号！");
        location.href="buyerlogin.jsp";
    }


</script>
</html>
